<!-- 封装图标的使用方法
<template>
  <svg :class="className" aria-hidden="true">
    <use :xlink:href="`#${iconName}`" :fill="color" />
  </svg>
</template>

<script>
export default {
  props: {
    iconName: { type: String, required: true },
    color: { type: String, default: '#333' },
    className: { type: String, default: 'icon' },
  },
}
</script> -->
<template>
  <svg
    :class="className"
    aria-hidden="true"
    xmlns="http://www.w3.org/2000/svg"
    class="svg-icon"
  >
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconName: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: 'currentColor', // 推荐使用 CSS 继承方案
    },
    className: {
      type: String,
      default: 'svg-icon',
    },
  },
  computed: {
    symbolId() {
      return `#${this.iconName}`
    },
  },
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor; /* 通过父元素 color 属性控制颜色 */
  overflow: hidden;
}
</style>
